<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="45%"
    :with-header="false"
    :width="700"
  >
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img
            class="drawer_t_l_img"
            src="/static/skin/herodoo/main/platform/home/img/quanyishaixuan.png"
            alt=""
          />
          添加标签
        </div>
        <img
          class="drawer_t_r"
          src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
          alt=""
          @click="drawer = false"
        />
      </div>
      <div class="drawer_c">
        <div class="drawer_c_title">
          <img
            src="/static/skin/herodoo/main/platform/home/img/shaixuannr.png"
            alt=""
            class="drawer_c_title_img"
          />
          已选内容
        </div>
        <div class="exhibition">
          <!-- <div class="exhibition_title">所选内容:</div> -->
          <div class="exhibition_content">
            <div
              class="exhibition_content_list"
              v-for="item in rightsArr"
              :key="item"
              @click="deleteExhibition(item)"
            >
              <div class="content_list_name">{{ item }}</div>
              <img
                class="content_list_img"
                src="/static/skin/herodoo/main/platform/home/img/shanchud.png"
                alt=""
              />
            </div>
          </div>
          <div class="clear" @click="clear">一键清空</div>
        </div>
        <!-- <div class="nav">
          <div class="navs" :class="{ 'navsIndex': navsIndex == index }" v-for="(item, index) in rightsTabControl"
            :key="index" :style="{ 'z-index': rightsTabControl.length - index }" @click="btnNavs(index)">
            <div :style="{ color: navsIndex == index ? '#292929' : '#B4B0AF' }">{{ item }}</div>
          </div>
        </div> -->
        <div class="nav_content">
          <el-checkbox-group v-model="rightsArr">
            <el-checkbox
              v-for="(item, index) in rightsClass"
              :key="index"
              :label="item.Name"
              :checked="item.checked"
            ></el-checkbox>
            <label class="el-checkbox" style="margin-bottom: 3rem;">
              <i v-if="is_addNew" @click="showInput" class="el-icon-plus"></i>
              <span v-if="is_addNew" class="el-checkbox__label">自定义</span>
              <el-input
                v-model="newrightsClass"
                style="width: 50%;"
                v-if="showInputBox"
                ref="customInput"
                @blur="handleBlur"
              ></el-input>
            </label>
          </el-checkbox-group>
        </div>
      </div>
      <div class="drawer_b">
        <span class="drawer_sx" @click="addToFather()">
          确认
        </span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import List from "../../../MCS/AIGC/City/Line/List.vue";

export default {
  name: "screenRights",
  props: {
    is_addNew: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      rightsClass: [],
      rightsArr: [],
      drawer: false,
      showInputBox: false,
      newrightsClass: ""
    };
  },

  mounted() {},
  created() {
    this.init();
  },
  methods: {
    init() {
      let o = this;
      // 权益标签
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 774,
          cellData: [
            { name: "ID" }, // ID
            { name: "Name" } // Name
          ]
        },
        function(data) {
          if (data.status.code == 200) {
            o.rightsClass = data.content.queryData;
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    showInput() {
      this.showInputBox = true;
      this.$nextTick(() => {
        this.$refs.customInput.focus(); // 让输入框获取焦点
      });
    },
    handleBlur() {
      this.showInputBox = false;
      // 处理失去焦点后的逻辑
      if (this.newrightsClass) {
        this.rightsClass.push(this.newrightsClass);
        this.newrightsClass = "";
      }
    },
    clear() {
      this.rightsArr = [];
    },
    //删除所选权益
    deleteExhibition(item) {
      this.rightsArr = this.rightsArr.filter(items => items != item);
    },
    handleClose(done) {
      this.drawer = false;
    },
    drawerOp(list) {
      this.drawer = true;
      if (!list || list.length == 0) {
        return;
      }
      let arr = list.split(",");
      this.rightsClass.map(v => {
        if (arr.filter(x => x == v.ID).length > 0) {
          v.checked = true;
        }
      });
    },
    addToFather() {
      let arr = this.rightsClass
        .filter(ele => this.rightsArr.includes(ele.Name))
        .map(ele => ele.ID);
      this.$emit("lableList", this.rightsArr, arr);
      this.drawer = false;
    }
  }
};
</script>
<style scoped>
>>> .el-input__inner {
  padding: 0;
}

.exhibition_content div {
  display: flex;
  align-items: center;
  background-color: #fbf8f9;
  height: 3rem;
  padding: 0 0.4rem;
  margin: 0.4rem;
  color: #898582;
  font-size: 1.2rem;
  border-radius: 1rem;
}

.content_list_img {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.el-checkbox {
  margin-top: 3rem;
  width: 25%;
  padding-left: 1rem;
  margin-right: 0;
}

.navsIndex {
  z-index: 10 !important;
}

.clear {
  text-decoration: underline;
  position: absolute;
  font-size: 1.2rem;
  color: #898582;
  cursor: pointer;
  bottom: 0.5rem;
  right: 1rem;
}

.drawer_box {
  padding: 3rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer_t {
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 1.4vw;
  margin-right: 1vh;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  border-radius: 1rem;
  margin: 3rem 0 5rem 0;
  padding: 2rem;
  background-color: #fdfdfd;
  box-shadow: inset 0px 0px 4px 0px #e9e9e9;
  background: #fdfdfd;
}

.drawer_c_title {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.8rem;
}

.drawer_c_title_img {
  width: 3rem;
  height: 3rem;
}

.nav_content {
  height: 45rem;
  width: 100%;
  border: 1px solid #dfdfdf;
  z-index: 5;
  /* position: absolute; */
  margin-top: 1px;
  border-radius: 0 1rem 1rem 1rem;
  overflow: auto;
}

.exhibition {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
}

.exhibition_title {
  font-size: 1.6rem;
}

.exhibition_content {
  display: flex;
  flex-wrap: wrap;
  max-height: 10rem;
  height: 10rem;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #ebebeb;
  width: 100%;
  border-radius: 1rem;
  padding: 0.2rem;
}

.drawer_b {
  height: 4rem;
  position: absolute;
  bottom: 1rem;
  right: 2rem;
}

.drawer_sx {
  padding: 1rem 4rem;
  background-color: #f78c51;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 1rem;
  cursor: pointer;
}

>>> .el-checkbox__label {
  font-size: 1.5rem;
}

>>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f78c51;
  border-color: #f78c51;
}

>>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f78c51;
  border-color: #f78c51;
}

>>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #f78c51;
}

>>> .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f78c51;
}

>>> .el-checkbox__inner:hover {
  border-color: #f78c51;
}
</style>
